* {box-sizing: border-box}

body, h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Geneva, sans-serif;
  }

  p{
      color: red;
  }


  .loginheader {
    padding: 10px;
    text-align: center;
    background: white;
    color: rgba(51, 47, 47, 0.671);
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
  }


/* Add padding to containers */
.login-form {
  margin-left: 20%;
  padding: 16px;
  display: inline;
  text-align: center;

}

.loginInputs{
    display: block;
    text-align: center;
}

  .fields {
    width: 30%;
    display: inline-block;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 6px;
    z-index: 1;
  }
  .select{
        width: 60%;
        padding: 5px;
  }


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: black;
    font-size: 20px;
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 20px;
    color: black;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 20px;
    color: black;
  }





  input[type=text],input[type='email'],input[type='password']
{
    font-size: 20px;
    width: 30%;
    margin: 5px 0 5px 0;
    padding: 10px;
    color: black;
    border: none;
    background: rgb(202, 229, 236);
    transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
}


@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  input[type=text],input[type='email'],input[type='password']
  {
      font-size: 20px;
      width: 90%;
      margin: 5px 0 5px 0;
      padding: 10px;
      color: black;
      border: none;
      background: rgb(202, 229, 236);
      transition:all .5s !important; -webkit-transition:all .5s !important;-o-transition:all .5s !important;-ms-transition:all .5s !important;-moz-transition:all .5s !important;
  }

}




/* Full-width input fields */
input[type=text]:focus, input[type=password]:focus,input[type=email]:focus {
  color: black;
  width: 35%;
  padding: 10px;
  margin: 5px 0 5px 0;
  display: inline;
  border: none;
  background: #ecdada;
  outline: none;
}


@media only screen and (max-width: 768px) {

  input[type=text]:focus, input[type=password]:focus,input[type=email]:focus {
    color: black;
    width: 95%;
    padding: 10px;
    margin: 5px 0 5px 0;
    display: inline;
    border: none;
    background: #ecdada;
    outline: none;
  }

}

/* input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
  background-color: #f1f1f1;
  outline: none;
} */


/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
  color: #04AA6D;
}

.hhref{
    font-size: 18px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}


/* Set a style for the submit/register button */

.loginbtn{
    width: 30%;
    display: inline;
    background-color: #b451ee;
    color: black;
    font-size: 20px;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    text-align: center;
}


@media only screen and (max-width: 768px) {

  .loginbtn{
    width: 90%;
    display: inline;
    background-color: #b451ee;
    color: black;
    font-size: 20px;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    text-align: center;

  }

}



.loginbtn:hover {
    opacity:1;
  }

/* Set a grey background color and center the text of the "sign in" section */
.signin {
    background-color: #f1f1f1;
    text-align: center;
  }

/* Add a blue text color to links */
a {
  color: dodgerblue;
}


.loader{
  display: none;
}


.loader {
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid rgb(111, 111, 235);
  border-bottom: 3px solid rgb(111, 111, 235);
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}